<template>
	<view>
		<u-alert-tips type="warning" v-if="freenum>=0" :title="'本月免费发布'+freenum+'条,已发布'+publishedNum+'条'" borderColor="#fdf6ec"
			:title-style="{'color':'#FE9C01'}">
		</u-alert-tips>
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label="职位类别" label-width="150rpx">
					<u-input v-model="jobClassId_name" @click="show()" type="select" placeholder="请选择" />
				</u-form-item>
				<u-form-item label="薪资" label-width="150rpx">
					<view style="display: flex;flex-direction: row;align-items: center;flex: 1;">
						<view class="salary">
							<u-input class="input" placeholder="请输入" v-model="form.lowSalary" type="number" />
							<text>-</text>
							<u-input class="input" placeholder="请输入" v-model="form.highSalary" type="number" />
							<text>元/月</text>
						</view>
						<view class="face">
							<u-checkbox-group>
								<u-checkbox active-color="#f44c01" @change="checkboxChange" v-model="checked"
									shape="circle">面议</u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="福利待遇" label-width="150rpx">
					<view class="rowcell" @click="showLabel()">
						<text style="color: rgb(192, 196, 204);flex: 1;" v-if="label_names.length===0">请选择</text>
						<block v-else>
							<view class="cell">
								<text class="item" v-for="(item,index) in label_names" :key="index">{{item}}</text>
							</view>
						</block>
						<u-icon name="arrow-down-fill" color="#999999" size="28"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="学历要求" label-width="150rpx">
					<u-input v-model="xueli_text" type="select" @click="xueliShow=true" placeholder="请选择" />
				</u-form-item>
				<u-form-item label="工作经验" label-width="150rpx">
					<u-input v-model="jobExpisre_text" type="select" @click="expShow=true" placeholder="请选择" />
				</u-form-item>
				<u-form-item label="工作地址" label-width="150rpx">
					<u-input v-model="form.address" @click="opensite" type="select" placeholder="请选择" />
				</u-form-item>
				<u-form-item label="招聘标题" label-width="150rpx" label-position="top">
					<u-input v-model="form.name" type="text" maxlength="50" placeholder="请输入" />
				</u-form-item>
				<u-form-item label="职位描述" label-width="150rpx" label-position="top">
					<u-input v-model="form.remark" type="textarea" height="200" :maxlength="-1"
						placeholder="请如实填写岗位职责和要求，不可出现电话/微信等联系方式。不可出现夸大、虚假等文字描述；严禁发布信用卡套现、刷信誉、手工活等招聘信息。若违反相关平台规定，信息将会被删除/驳回/下架处理。（最少10个字）" />
				</u-form-item>
				<u-form-item label="联系人" label-width="150rpx">
					<u-input v-model="form.contactName" placeholder="请输入" />
				</u-form-item>
				<u-form-item label="联系电话" label-width="150rpx">
					<u-input v-model="form.contactPhone" placeholder="请输入" />
				</u-form-item>
				<u-form-item v-if="isZhiding" label="信息置顶" label-width="150rpx">
					<view class="rowcell" @click="openTop()">
						<text style="color: #F44C01;flex: 1;">{{seltop.text}}</text>
						<u-icon name="arrow-down-fill" color="#999999" size="28"></u-icon>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<jobSelect ref="jobSelect" :listData="listData" @confirem="confiremJob"></jobSelect>
		<mulselect ref="mulselect" :listData="mulData" :is_mult="true" @confirem="confiremLabel"></mulselect>
		<u-select v-model="xueliShow" :list="xueliData" @confirm="confirmxueli"></u-select>
		<u-select v-model="expShow" :list="expData" @confirm="confirmExp"></u-select>
		<topmodel ref="topmodel" :listData="topList" @confirem="confiremTop"></topmodel>
		<view style="height: 120rpx;"></view>
		<botbtn btntext="发布" @confirem="submit"></botbtn>
	</view>
</template>

<script>
	import jobSelect from '@/components/yunmiao-jobSelect/yunmiao-jobSelect.vue'
	import mulselect from '@/components/yunmiao-mulselect/yunmiao-mulselect.vue'
	import topmodel from '@/components/Topmodel/Topmodel.vue'
	import botbtn from '@/components/Botbtn/Botbtn.vue'
	export default {
		components: {
			jobSelect,
			mulselect,
			topmodel,
			botbtn
		},
		data() {
			return {
				freenum: -1,
				publishedNum:0,

				listData: [],
				form: {
					name: '',
					isMianyi: '1',
					lowSalary: '',
					highSalary: '',
					jobClassId: '',
					jobExpisre: '',
					salaryLevel: '',
					xueli: '',
					status:'1',
					content: '',
					address: '',
					lon: '',
					lin: '',
					person_name: '',
					person_mobile: '',
					topId: 0,
				},
				jobClassId_name: '',
				label_names: [],
				xueli_text: '',
				jobExpisre_text: '',
				mulData: [],
				checked: false,
				xueliShow: false,
				xueliData: [{
						value: '不限',
						label: '不限'
					},
					{
						value: '初中',
						label: '初中'
					},
					{
						value: '高中/中专',
						label: '高中/中专'
					},
					{
						value: '大专',
						label: '大专'
					},
					{
						value: '本科',
						label: '本科'
					},
					{
						value: '本科以上',
						label: '本科以上'
					}
				],
				expShow: false,
				expData: [{
					value: '不限',
					label: '不限'
				}, {
					value: '1年以下',
					label: '1年以下'
				}, {
					value: '1-3年',
					label: '1-3年'
				}, {
					value: '3-5年',
					label: '3-5年'
				}, {
					value: '5-8年',
					label: '5-8年'
				}, {
					value: '8年以上',
					label: '8年以上'
				}],
				topShow: true,
				topList: [{
					id: 0,
					top_day: 0,
					price: 0,
				}],
				seltop: {
					id: 0,
					text: '不置顶'
				},
				isZhiding:false,
			};
		},
		onLoad() {
			this.getJobCategory()
			this.getLabels()
			this.getTopConfig()
			this.getCateFreeNum()
		},
		methods: {
			getCateFreeNum() {
				this.$u.get('/home/level/getCateFreeNum', {type:6
				}).then(res => {
					this.freenum = res.jobCount;
					this.publishedNum = 2;

				})
			},
			getJobCategory() {
				this.$u.get('/home/job/getJobCategory', {

				}).then(res => {
					this.listData = res;
				})
			},
			getLabels() {
				this.$u.get('/home/getLabel', {
                'dictType':'jobSalary'
				}).then(res => {
					this.mulData = res;
				})
			},
			getTopConfig() {
				this.$u.get('/home/getLabel', {
                'dictType':'topConfig'
				}).then(res => {
					this.topList = this.topList.concat(res)
					if(res && res.length>0){
					  this.isZhiding = true;
					}
				})
			},
			show() {
				this.$refs.jobSelect.show()
			},
			showLabel() {
				this.$refs.mulselect.show()
			},
			confiremJob(e) {
				this.form.jobClassId = e.code;
				this.jobClassId_name = e.name;
			},
			// 选中某个单选框时，由radio时触发
			checkboxChange(e) {
				if (e.value) {
					this.form.isMianyi = 1
				} else {
					this.form.isMianyi = 0
				}
			},
			confiremLabel(e) {
				this.form.salaryLevel = e.ids.join(',');
				this.label_names = e.labels;
			},
			confirmxueli(e) {
				this.xueli_text = e[0].label;
				this.form.xueli = e[0].value;
			},
			confirmExp(e) {
				this.jobExpisre_text = e[0].label;
				this.form.jobExpisre = e[0].value;
			},
			confiremTop(e) {
				this.form.topId = e.dictCode;
				console.log(e)
				if (e.top_day == 0) {
					e.text = '不置顶';
				} else {
					e.text = e.dictLabel + '天-￥'+ e.dictValue;
				}
				this.seltop = e;
			},
			openTop() {
				this.$refs.topmodel.show()
			},
			opensite() {
				var that = this;
				uni.chooseLocation({
					success: function(res) {
						that.form.lon = res.latitude;
						that.form.lin = res.longitude;
						that.form.address = res.address;
					}
				});
			},
			submit() {
				if (this.form.jobClassId == '') {
					return this.$u.toast('请选择职位')
				}
				if ( (this.form.lowSalary == '' || this.form.highSalary == '')) {
					return this.$u.toast('填完善薪资')
				}
				if (this.form.xueli == '') {
					return this.$u.toast('请选择学历要求')
				}
				if (this.form.jobExpisre == '') {
					return this.$u.toast('请选择工作经验')
				}
				if (this.form.lon == '' || this.form.lin == '' || this.form.address == '') {
					return this.$u.toast('请选择工作地址')
				}
				if (this.form.name == '') {
					return this.$u.toast('请输入标题')
				}
				if (this.form.remark == '') {
					return this.$u.toast('请输入职位描述')
				}
				if (this.form.contactName == '') {
					return this.$u.toast('请输入联系人')
				}
				if (this.form.contactPhone == '') {
					return this.$u.toast('请输入联系电话')
				}
				if (!this.$u.test.mobile(this.form.contactPhone)) {
					return this.$u.toast('请输入正确的联系电话')
				}
				this.$u.post('tc/saveJob', this.form).then(res => {
				console.log(res)
					if (res.status == '1') {
						this.$u.route({
							type: 'redirectTo',
							url: '/pagesPush/pay/pay',
							params: {
								order: JSON.stringify(res),
								type: 'job'
							},
						});
					} else {
						this.$u.route({
							type: 'redirectTo',
							url: '/pagesPush/push_result/push_result',
							params: {
								type: 'push'
							}
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		padding: 20rpx;
		background-color: white;

		.salary {
			display: flex;
			flex-direction: row;
			align-items: center;
			color: #666666;

			.input {
				width: 150rpx;
				background-color: #F1F1F1;
			}
		}

		.face {
			flex: 1;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
		}
	}

	.rowcell {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;

		.cell {
			display: flex;
			flex-direction: row;
			align-items: center;
			flex-wrap: wrap;
			flex: 1;

			.item {
				font-size: 25rpx;
				background-color: #F8F8F8;
				padding: 0rpx 15rpx;
				border-radius: 5rpx;
				margin: 5rpx;
				height: 50rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
